<script setup lang="ts">
import { apiBrokerageAdd, apiIntroducerInfo } from "@/apis/withdraw";
import { router, toast } from "@/utils/tools";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, onMounted } from "vue";

const keyboard = ref(false);
const drawMoney = ref("");
const allMoney = ref(2222);

const popupSuccess = ref(false);
const detail = reactive({});
const withdrawInfo = reactive({});
const openKeyboard = () => {
  keyboard.value.open();
};
let btnFlag = ref(false)

// 全部提现
const all = () => {
  drawMoney.value = detail.residueMoney;
};

const handleWithDraw = async () => {
  if (btnFlag.value) {
    return
  }
  if (!drawMoney.value) {
    toast("请先输入提现金额");
    return false;
  }

  if (!/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/.test(drawMoney.value)) {
    toast("请输入合法提现金额");
    return false;
  }
  if (Number(drawMoney.value) < 1) {
    toast("提现金额必须大于1元");
    return false;
  }
  if (Number(drawMoney.value) > Number(detail.residueMoney)) {
    toast("提现金额不能大于可提现金额");
    return false;
  }
  popupSuccess.value.open();
};

const getDetail = async () => {
  let res = await apiIntroducerInfo();
  // 判断是否绑定收款信息
  if (res.code === 500) {
    uni.showModal({
      title: "提示",
      content: res.msg,
      success: function (res) {
        if (res.confirm) {
          router("/pagesMy/collection-info/collection-info", "redirectTo");
          return false;
        } else if (res.cancel) {
          // 取消返回上一页
          uni.navigateBack({ delta: 1 });
        }
      },
    });
  }
  Object.assign(detail, res.data);
  detail.bankCardNumberSuff = detail.bankCardNumber.slice(-4);

};
// 弹窗取消
const popClose = () => {
  popupSuccess.value.close()
}
// 弹窗确定
const popConfirm = async () => {
  btnFlag.value = true
  // 提现接口
  let res = await apiBrokerageAdd({
    brokerage: drawMoney.value,
  });

  if (res.code === 200) {
    Object.assign(withdrawInfo, res.data);
    toast(res.msg);
    setTimeout(() => {
      popupSuccess.value.close();
      uni.navigateBack({ delta: 1 });
    }, 2000);
  } else {
    toast(res.msg);
  }
  btnFlag.value = true
}

onLoad((options: any) => {
  detail.residueMoney = options.residueMoney;
  getDetail();
  //
  // withdraw-deposit/record
});

</script>
<template>
  <view class="container">
    <view class="bank flex text-lg">
      <view>
        <text>到账银行卡:</text>
      </view>
      <view class="flex flex-column margin-left-20">
        <text class="bank-name">{{ detail.carBlank }}({{ detail.bankCardNumberSuff }})</text>
        <text class="font-size-14">申请成功后1-3个工作日</text>
      </view>
    </view>

    <view class="flex flex-column withdraw l-card">
      <view style="position: relative">
        <text class="title-money">提现金额:</text>
        <uv-input placeholder="请输入提现金额" border="bottom" fontSize="36rpx" v-model="drawMoney" type="digit">
          <template v-slot:prefix>
            <text class="money-icon">￥</text>
          </template>
        </uv-input>
        <view class="record" @click="router('/pagesOrder/withdraw-deposit/record')">提现记录</view>
        <view class="flex flex-between margin-top-20 bottom-tips">
          <text class="font-size-12 left">剩余可提现金额:
            <text class="money">{{ detail.residueMoney }}</text> 元</text>
          <text class="font-size-12 right" @click="all">全部提现</text>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn" @click="handleWithDraw">提现</button>
    </view>
  </view>
  <!-- 数字键盘 -->
  <!-- <uv-keyboard ref="keyboard" z-index="9999" mode="number" :overlay=false :safeAreaInsetBottom="true" tips="请输入提现金额" @change="changeWithdraw" @confirm="confirm"
    @backspace="backspace"></uv-keyboard> -->

  <uv-popup ref="popupSuccess" @change="change" round="10" :closeable="true">
    <view class="flex flex-column popup-box">
      <view class="success-title flex">
        <text class="text-lg">申请提现成功，平台处理中</text>
      </view>
      <view class="flex flex-column text-dfsuccess-content margin-top-20">
        <view class="margin-top-10">
          <text>提现金额：</text>
          <text>{{ drawMoney }}元</text>
        </view>

        <view class="margin-top-10">
          <text>提现账户：</text>
          <text>{{ detail.carBlank }}({{ detail.bankCardNumberSuff }})</text>
        </view>
        <view class="margin-top-10">
          <text>佣金费用：</text>
          <text>{{ detail.deduction??0 }}%</text>
        </view>
        <view class="margin-top-10">
          <text>预计到账时间:</text>
          <text>申请成功后1-3个工作日</text>
        </view>
        <view class="popup-btn-box flex flex-between">
          <button @tap="popClose()">取消</button>
          <button @tap="popConfirm()">确定</button>
        </view>
      </view>
    </view>
  </uv-popup>
</template>
<style scoped lang="scss">
page {
  height: 100vh;
}

.record {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 24rpx;
  color: #9a9a9a;
  text-decoration: underline;
}

.bottom-tips {
  .left {
    color: #b3b3b3;
    font-weight: 600;

    .money {
      margin: 0 5rpx;
    }
  }

  .right {
    color: #c44c34;
    font-weight: 700;
  }
}

// .all {
//   text
// }

.container {
  padding: 0;
}

.bank {
  padding: 80rpx 60rpx;
  color: #333333;

  .bank-name {
    font-weight: bold;
  }
}

.withdraw {
  color: #333333;
  padding: 20rpx 40rpx;
  border-radius: 24px 24px 0 0;
  height: 100vh;
  font-size: 32rpx;
  flex-grow: 1;

  .title-money {
    // font-size: 32rpx;
  }

  .money-icon {
    font-weight: 600;
    //   font-size: ;
  }
}

.popup-box {
  padding: 60rpx 30rpx 30rpx 30rpx;
}

.success-title {
  justify-content: center;
}

.success-title text {
  font-weight: 600;
}

.success-content {
  color: #6c6c6c;
}

.popup-btn-box {
  margin-top: 40rpx;

  button {
    width: 48%;
    height: 80rpx;
    font-size: 28rpx;
    color: #000;
    border: 1px solid #bbb6b6;
    border-radius: 10rpx;

    &:last-child {
      background: linear-gradient(89.54deg,
          rgba(191, 1, 3, 1) 0.69%,
          rgba(255, 84, 2, 1) 99.31%);
      color: rgba(255, 255, 255, 1);
      border: 1px solid #ffffff;
    }
  }
}
</style>
